<script setup lang="ts">
import { onMounted } from "vue"; //导入vue函数
import * as echarts from "echarts"; //导入echarts

//组件加载完成
onMounted(() => {
  //初始化图表
  initCharts();
});

//初始化图表
function initCharts() {
  //创建图表
  const myChart = echarts.init(document.getElementById("main_sale"));
  //设置图表参数
  myChart.setOption({
    color: ["#1493fa"],
    title: { text: "2022年月度销售额" },
    xAxis: {
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      name: "月份",
      axisLabel: {
        interval: 0,
      },
    },
    yAxis: {
      name: "单位（千万元）",
    },
    grid: {
      left: "5%",
      right: "10%",
      bottom: "5%",
      containLabel: true,
    },
    legend: {},
    series: [
      {
        data: [6, 7, 8.5, 8, 9, 10, 13, 12, 10, 16, 15, 14],
        type: "line",
        name: "销售额",
        smooth: true,
        label: {
          show: true,
          position: "top",
        },
      },
    ],
  });
  // 图表自适应大小
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
</script>

<template>
  <section class="sale">
    <!--显示图表的容器-->
    <div id="main_sale"></div>
  </section>
</template>

<style scoped>
.sale {
  border: 1px solid #e4e7ed;
  border-radius: 5px;
  width: 50%;
  box-shadow: 0px 0px 5px 5px #e4e7ed;
  margin: 20px;
  display: flex;
}
.sale #main_sale {
  width: 100%;
  height: 300px;
  margin: 10px;
}
</style>
